<template>
  <el-dialog
    title="我的核验信息"
    :visible.sync="verifyVisible"
    :close-on-click-modal="false"
    :show-close="false"
    :append-to-body="true"
    top="10vh"
    width="70%"
    class="wrap"
  >
    <div v-if="model && model.length">
      <div class="list-wrap d-flex flex-wrap">
        <template v-for="item in model">
          <div
            class="item"
            :class="{ seleted: selectedId == item.id }"
            :key="item.id"
            @click="selectedId = selectedId == item.id ? '' : item.id"
          >
            <span
              :class="['select-icon fs-xxxl', selectedId == item.id ? 'el-icon-success text-red' : 'el-icon-circle-check text-gray']"
            ></span>
            <div v-for="innerItem in item.columns" :key="innerItem.code">
              <div class="ellipsis" v-if="!innerItem.hidden">{{ innerItem.label }} <a href="javascript:void(false)" :title="innerItem.value">{{ innerItem.value }}</a></div>
            </div>
          </div>
        </template>
      </div>

      <el-row type="flex" justify="end">
        <pagination :total="total" :page.sync="page" :limit.sync="pageSize" @pagination="getList" />
      </el-row>
    </div>
    <div v-else class="text-center">暂无数据</div>

    <span slot="footer" class="dialog-footer">
      <el-button size="medium" plain @click="handleClose">取消</el-button>
      <el-button size="medium" type="primary" @click="handleComfirm" :disabled="!selectedId">确认</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { queryDelVerifiAllByPage } from "@/api/user";
import pagination from "@/components/Pagination";

export default {
  components: {
    pagination,
  },
  props: {
    verifyVisible: {
      type: Boolean,
      default: false,
    },
    houDelId: String
  },
  data() {
    return {
      model: [],
      selectedId: "",
      total: 0,
      page: 1,
      pageSize: 10,
    };
  },
  created() {},
  mounted() {},
  watch: {
    verifyVisible: {
      immediate: true,
      handler(newValue) {
        if (!newValue) return;

        this.selectedId = "";
        this.getList({ page: 1 });
      },
    },
  },
  computed: {},
  methods: {
    getList({ page }) {
      queryDelVerifiAllByPage({
        delId: this.houDelId,
        pageNum: page,
        pageSize: this.pageSize,
      }).then((content) => {
        this.total = content.total;
        this.model = content.list;
      });
    },
    handleClose() {
      this.$emit("onHideVerify");
      this.$bus.$off("verify-selected");
    },
    handleComfirm() {
      const item = this.model.find((item) => item.id === this.selectedId);

      this.$bus.$emit("verify-selected", item);
      this.$emit("onHideVerify");
    },
  },
};
</script>
<style scoped>
.list-wrap{
  line-height: 20px;
}
.item {
  width: 200px;
  box-sizing: border-box;
  border: 1px solid #606266;
  padding: 20px;
  padding-top: 40px;
  margin: 5px;
  border-radius: 14px;
  cursor: pointer;
  position: relative;
}
.select-icon {
  position: absolute;
  top: 10px;
  right: 10px;
}
.wrap >>> .el-dialog__body{
  padding-bottom: 0;
}
</style>
